<template>
  <view class="shop">
    <!-- 1.0 顶栏 -->
    <u-navbar back-icon-color="#FFF"
              :background="navbar"
              :border-bottom="false"
              title-color="#303133"
              title-bold>
    </u-navbar>
    <!-- 1.1 毛玻璃背景 -->
    <view class="glass"></view>
    <!-- 2.0 商家卡片 -->

    <Head :shop='shop'></Head>
    <!-- 3.0 tab栏 -->
    <view class="shop-head main-view">
      <!-- tab -->
      <u-tabs :list="tab"
              class="tabs"
              font-size='35'
              :is-scroll="false"
              :current="tabIndex"
              :show-bar='false'
              @change="onTabChange"></u-tabs>
      <!-- 搜索 -->
      <view class="search">
        <u-search shape="round"
                  disabled
                  input-align='center'
                  placeholder='搜索'
                  :show-action='false'></u-search>
      </view>
    </view>
    <view class="shop-body">
      <!-- 4.0 侧边栏 -->
      <Sidebar :category='category'></Sidebar>
      <!-- 5.0 滚屏 -->
      <Menu :category='category'></Menu>
    </view>
    <!-- 6.0 购物条 -->
    <ShopNav :shop='shop'
             :category.sync='category'></ShopNav>
  </view>
</template>

<script>
import Head from './components/head.vue'
import Sidebar from './components/sidebar.vue'
import Menu from './components/menu.vue'
import ShopNav from './components/shop-nav.vue'

export default {
  components: { Head, Sidebar, Menu, ShopNav },
/*   computed: {
    shopId() {
      return this.$route.query.shopId
    },
  }, */
  data() {
    return {
      navbar: {
        backgroundColor: 'grba(0,0,0,0)', //透明导航栏
      },
      tab: [{ name: '商品' }, { name: '评价' }, { name: '商家' }],
      tabIndex: 0,
      shop: {}, //当前店铺信息
      goods: [], //当前店铺所有商品
      category: [], //所有分类
      shopId: 0,
    }
  },
  onLoad({ shopId }) {
    this.shopId = shopId
  },
  async created() {
    await this.getShopFn()
    await this.getGoodsFn()
    await this.getCategoryFn()
  },
  methods: {
    // 获取店铺
    async getShopFn() {
      const shop = await this.$u.api.getShopById({ id: this.shopId })
      // console.log(shop[0])
      this.shop = { ...shop[0] }
    },
    // 获取菜单
    async getGoodsFn() {
      const goods = await this.$u.api.getGoodsByShopId({ id: this.shopId })
      this.goods = goods.map((item) => ({
        ...item,
        count: 0,
      }))
    },
    // 获取分类
    getCategoryFn() {
      // 夺取全部分类id
      const all = this.goods.map((item) => item.category_id)
      // 去重
      const ids = all
        .filter((item, index) => all.indexOf(item) === index)
        .sort((a, b) => b - a)
      // 获取分类名
      const category = []
      ids.map(async (id) => {
        const res = (await this.$u.api.getCateById({ id }))[0]
        // 加入商品
        const goods = this.goods.filter(
          (good) => good.category_id === res.category_id
        )
        category.push({ ...res, goods })
      })
      this.category = category
    },
    onTabChange(val) {
      this.tabIndex = val
    },
  },
}
</script>

<style lang="scss" scoped>
.shop {
  position: relative;
}
.glass {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 165rpx;
  background: url(https://cdn.uviewui.com/uview/swiper/1.jpg) no-repeat;
  transform: scale(1.5);
  filter: blur(10px);
  z-index: -1;
}
.shop-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20rpx;
  background-color: #fff;
  border-bottom: 5rpx rgb(228, 228, 228) solid;
  height: 100rpx;
  .tabs {
    width: 350rpx;
  }
  .search {
    width: 200rpx;
  }
}
.main-view {
  width: 100vw;
  padding: 0 20rpx;
}
.shop-body {
  display: flex;
  height: calc(100vh - 44px - 520rpx);
  // background-color: tomato;
}
</style>
